<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 链接自己的链接 -->
    <link rel="stylesheet" href="/lib/css/qq.css">
    <!-- 重置链接 -->
    <link rel="stylesheet" href="/lib/css/base.css">
    <link rel="stylesheet" href="/lib/css/reset.css">
    <!-- 链接font图标 -->
    <link rel="stylesheet" href="/lib/font/iconfont.css">
    <!-- 引入jq -->
    <script src="/jquery/dist/jquery.js"></script>
    <script src="/socket.io/socket.io.js"></script>


</head>

<body>
    <div class="zong">
        <!-- 表头行 -->
        <div class="title">美丽中国群聊</div>
        <!-- 设置 -->
        <div class="liao">
            <ul>
                <li>
                    <a href="">聊天</a>
                </li>
                <li>
                    <a href="">公告</a>
                </li>
                <li>
                    <a href="">相册</a>
                </li>
                <li>
                    <a href="">文件</a>
                </li>
                <li>
                    <a href="">应用</a>
                </li>
                <li>
                    <a href="">设置</a>
                </li>
            </ul>
            <ul>
                <li><a class="login" href="/login">登录</a></li>
                <li><a href="/out">退出</a></li>
                <li class="iconfont icon-24gf-phoneLoudspeaker "></li>
                <li class="iconfont icon-shipin"></li>
                <li class="iconfont icon-yaoqing"></li>
                <li class="iconfont icon-shenglvehao"></li>
            </ul>
        </div>
        <!-- 内容 -->
        <div class="con">
            <!-- 左边 -->
            <div class="left">
                <div class="left-t">

                </div>
                <div class="left-b">
                    <div class="simle">表情占位</div>
                    <textarea name="" id="" cols="80" rows="9">

                    </textarea>
                    <!-- 聊天内容隐藏 -->
                    <div id="kuang">
                        <div class="l-con">
                            <span class="b mc"><b>
                                    <%=data[0].nicheng%>
                                </b>:</span><img src="/lib/images/meiko.jpg" width="50px" alt="">
                            <span class="mn">宝贝~~想你了</span>
                        </div>
                        <div class="r-con">
                            <span class="b  cn"><b>
                                    <%=data[0].nicheng%>
                                </b>:</span>
                            <span class="oc">讨厌~死鬼!</span>
                            <img src="/lib/images/viper.jpg" width="50px" alt="">
                        </div>
                        <!-- 好友上线提醒 -->
                        <div class="tan">
                            <span class="tan-name"><b>
                                <%=data[0].nicheng%>
                            </b>  
                            </span>
                            <span class="tan-msg">
                                <b>
                                    上线啦~~~~~
                                </b>
                            </span>
                        </div>
                    </div>
                    <button class="btn">发送</button>
                </div>
            </div>
            <!-- 右边 -->
            <div class="right">
                成员列表
                <div class="right-t">

                </div>
                <div class="right-b">
                    聊天记录
                    <div class="jilu">

                    </div>

                </div>
            </div>
            <!-- 成员列表 -->
            <div id="kuang">
                <div class="chengyuan">
                    <img src="/lib/images/meiko.jpg" width="50px" alt="">
                    <span class="list"><b>
                            <%=data[0].nicheng%>
                        </b></span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 上面引入socket，这里直接用
    let socket = io.connect("/");

    //  ajax接受后台传来的数据
    $.get("/ajax", function (res) {
        // 接受后台的200 ，就是登录状态
        if (res.code == 200) {


            // 显示xx成员上线
            let t = $('#kuang .tan').clone();
            // console.log(t);
            // 获取动态名字
            let tname = t.find('.tan-name b').html();
            // console.log(tname);
            // 获取内容
            let tmsg=t.find('.tan-msg b').html();
            // console.log(tmsg);
            // 显示到聊天内容区
            $('.left-t').append(t);
            // 名字传到后台
            socket.emit("tanchuang", { 'name': tname,'msg':tmsg })


            // 登录显示成员列表
            // 克隆成员列表
            let lst = $('#kuang .chengyuan').clone();
            // 获取动态名字
            let name = lst.find('.list b').html();
            // 显示到右侧的成员列表列
            $('.right .right-t').append(lst);
            // 名字传到后台
            socket.emit("list", { 'name': name })




            // 发送的点击事件
            $(".btn").click(function () {

                // 获取到输入框的内容  右边 去除空格
                let v = $.trim($("textarea").val());

                // 内容为空不允许发送
                if (v == '') {
                    alert('内容为空，不允许发送')
                    return;
                } else {
                    // 克隆
                    let me = $('#kuang .r-con').clone();
                    // 获取动态名字
                    let name = me.find('.cn b').html()
                    // 获取内容
                    me.find('.oc').html(v)

                    // 渲染页面
                    $('.left-t').append(me);
                    socket.emit("7171", { 'name': name, 'msg': v })


                    // 获取到输入框的内容  给聊天记录 右边
                    let v1 = $("textarea").val();
                    // 克隆内容
                    let me1 = $('#kuang .r-con').clone();
                    // 修改name
                    let name1 = me1.find('.cn b').html()
                    // 修改内容
                    me1.find('.oc').html(v1)
                    // 追加到聊天记录里
                    $('.jilu').append(me1);
                    socket.emit("ltjl", { 'name': name1, 'msg': v1 })

                    $("textarea").val('');
                }


            })
        } else {
            $(".btn").click(function () {
                location.href = './login'
            })
        }
    })
    // 广播成员列表
    socket.on('list', res => {
        let lst = $('#kuang .chengyuan').clone();
        // console.log(lst);
        let name = lst.find('.list b').html(res.name);
        $('.right .right-t').append(lst);
    })

    // 回车发送信息
    $(window).keydown(e => {
        // 如果keyCode是13
        if (e.keyCode == 13) {
            // 让前面的元素执行一次阐述中的事件
            // 就是让send再执行一次click事件
            $('.btn').trigger('click');
            // 阻止默认事件，阻止回车
            return false;
        }
    })

    // 从后台接受聊天信息，广播
    socket.on("7171", res => {
        let o = $('#kuang .l-con').clone();
        o.find('.mc b').html(res.name);
        o.find('.mn').html(res.msg);
        $('.left-t').append(o)
        console.log(res);
    })


    // 从后台接受聊天记录，广播
    socket.on("ltjl", res => {
        let o = $('#kuang .l-con').clone();
        // 广播name
        o.find('.mc b').html(res.name);
        // 广播名字
        o.find('.mn').html(res.msg);
        $('.jilu').append(o)
        console.log(res);
    })


    // 从后台接受弹窗，广播
    socket.on("tanchuang", res => {
        let o = $('#kuang .tan').clone();
        // 广播name
        let name=o.find('.tan-name b').html(res.name);
        // 广播 上线啦~~~~
        let msg=o.find('.tan-msg b').html(res.msg);
        $('.left-t').append(o)
        console.log(res);
    })




</script>

</html>